<style type="text/css">
	.layui-table-cell{
		height: auto; /* */
	}
	.layui-table-cell img{
		width: 80px;
		height: 80px;
	}
</style>
<style type="text/css">
	#demo1 img{
		width: 92px;
		height: 92px;		
	}
	#demo1 span{
		position: relative;
	}
</style>
<fieldset class="layui-elem-field layui-field-title">
  <legend>分类列表</legend>
</fieldset>
<table id="list" lay-filter="list" ></table>
<script type="text/html" id = "bar">
    {{# if(d.status == 1){	}}
	<a class="layui-btn layui-btn-sm" lay-event="recover">恢复</a>
	{{# } }}
	{{# if(d.status == 0){	 }}
	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">禁用</a>
	{{# } }}
	<a class="layui-btn layui-btn-sm" lay-event="edit">修改</a>
</script>
<script type="text/html" id="head">
	{{#
		if(d.head != null){
	}}
		<img src="http://127.0.0.1:9000/upload/{{d.head}}" />
	{{#
		}	
	}} 
</script> 
 <script type="text/html" id="edit1">
	<form class="layui-form">
		<input type="hidden" name="id" />
		<div class="layui-form-item">
			<label class="layui-form-label">用户昵称</label>
			<div class="layui-input-inline">
				<input type="text"  name="username" class="layui-input"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-inline">
				<input type="text"  name="password" class="layui-input"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">真实姓名</label>
			<div class="layui-input-inline">
				<input type="text"  name="realname" class="layui-input"/>
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">身份证号</label>
			<div class="layui-input-inline">
				<input type="text"  name="idcard" class="layui-input"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-inline">
				<input type="text"  name="phone" class="layui-input" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">余额</label>
			<div class="layui-input-inline">
				<input type="text"  name="money" class="layui-input" />
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">支付密码</label>
			<div class="layui-input-inline">
				<input type="password"  name="paypwd" class="layui-input"/>
			</div>
		</div>
		<div class="layui-form-item">
			<input type="hidden" name="head"  "/>
			<label class="layui-form-label">分类图片</label>
			<div class="layui-input-inline">
				<!-- 使用layui的上传图片的插件 -->
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test1">上传图片</button>
				  <div class="layui-upload-list">
				    <img class="layui-upload-img" id="demo1" style="width: 92px;height: 92px;">
				    <p id="demoText"></p>
				  </div>
				  <div style="width: 95px;">
				    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
				      <div class="layui-progress-bar" lay-percent=""></div>
				    </div>
				  </div>
				</div> 
			</div>
		</div>
	
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn layui-btn-danger" 
					lay-submit lay-filter="edit">修改</button>
			</div>	
	</form>
</script> 


<script type="text/javascript">
	layui.use(['table','upload','form','element'],function(){
		var table = layui.table;
		var form = layui.form;
		var upload = layui.upload;
		var element = layui.element;
		var $ = layui.$;
		
		table.render({
			id:'list',
			elem:'#list',
			height:600,
			url:'http://localhost:9000/api/users',
			method:'get',
			page:true,
			cols:[[
				{field: 'id',title:'ID',width: 100},
				{field:'username',title:'名字'},
				/* {field:'password',title:'密码'}, */
				{title:'图片',templet:"#head",width: 200},
				{field:'realname',title:'真实姓名'},
				{field:'idcard',title:'身份证号'},
				{field:'phone',title:'电话'},
				{field:'money',title:'余额'},
				{field:'paypwd',title:'支付密码'},
				
				{field:'status',title:'状态',templet:function(d){
					return ['正常','禁用'][d.status];
				},width : 100},
				{title:'操作',toolbar:'#bar',width: 150,fixed:'right'}
			]],
			parseData: function(res){
				return{
					"code":0,
					"msg":res.data.msg,
					"count":res.data.total,
					"data":res.data.list
				};
			},
			done: function(res, curr, count){
							// 固定列高度适应
							$(".layui-table-main  tr").each(function (index ,val) {
								$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
							});
						}
		});
		
		table.on('tool(list)',function(obj){
			//obj 工具条所在的这一行数据
			var data = obj.data;
			var layEvent = obj.event;
			var tr = obj.tr;	
			
			if(layEvent == 'delete'){
				layer.confirm('确定删除吗？',function(index){
					
					layer.close(index);
					$.ajax({
						url:'http://127.0.0.1:9000/api/users',
						type:'delete',
						data:{id:obj.data.id},
						dataType:'',
						success:function(data){
							if(data.status == 200){
								layer.msg("禁用成功");
							}else if (data.status == 404){
								layui.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){
							
						}
					});
				});
				
				
			}else if (layEvent == 'recover'){
				 layer.confirm("要恢复吗？" ,function(index){
					layer.close(index);
					$.ajax({
						url:'http://127.0.0.1:9000/api/users/'+obj.data.id,
						type:'get',
						dataType:'json',
						success: function(data){
							if(data.status == 201){
								layer.msg("恢复成功");
							}else{
								layer.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){
							
						}
					});
				}); 
			}else if(layEvent == 'edit'){
				var index =layer.open({
					type:1,
					title:'编辑商品',
					area:['500px','400px'],
					content:$('#edit1').html()
				});
				$("input[name='id']").val(data.id);
				$("input[name='username']").val(data.username); 
				$("input[name='password']").val(data.password); 
				$("input[name='realname']").val(data.realname);
				$("input[name='idcard']").val(data.idcard); 
				$("input[name='phone']").val(data.phone); 
				$("input[name='money']").val(data.money); 
				$("input[name='paypwd']").val(data.paypwd); 
				 /* $("input[name='suit']").val(data.suit); */
				$('#demo1').attr("src","http://127.0.0.1:9000/upload/"+ data.head )
				 $("input[name='head']").val(data.head);
				
				
				
				//多图片上传
				   var uploadInst = upload.render({
				      elem: '#test1'
				      ,url: 'http://127.0.0.1:9000/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				      ,before: function(obj){
				        //预读本地文件示例，不支持ie8
				        obj.preview(function(index, file, result){
				          $('#demo1').attr('src', result); //图片链接（base64）
				        });
				        
				        element.progress('demo', '0%'); //进度条复位
				        layer.msg('上传中', {icon: 16, time: 0});
				      }
				      ,done: function(res){
				        //如果上传失败
				        if(res.code > 0){
				          return layer.msg('上传失败');
				        }
				        //上传成功的一些操作
						 $("input[name='head']").val(res.data);
				        //……
				        $('#demoText').html(''); //置空上传失败的状态
				      }
				      ,error: function(){
				        //演示失败状态，并实现重传
				        var demoText = $('#demoText');
				        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				        demoText.find('.demo-reload').on('click', function(){
				          uploadInst.upload();
				        });
				      }
				      //进度条
				      ,progress: function(n, elem, e){
				        element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
				        if(n == 100){
				          layer.msg('上传完毕', {icon: 1});
				        }
				      }
				    });
				
				
	
				//提交
				form.on('submit(edit)',function(data){
					var pictures = [];
					$.ajax({
						url:'http://127.0.0.1:9000/api/users/edit',
						type:'put',
						data:JSON.stringify(data.field),
						contentType:'application/json; charset=utf-8',
						dataType:'json',
						success:function(data){
							if(data.status == 201){
								layer.msg("修改成功！");
								layer.close(index);
								table.reload('list');
							}else{
								layer.msg(data.msg);
							}
						},
						error:function(){
							
						}
					});
					
					return false;
				});
				
				
			}			
		});
		
		function gotoUrl(url){
			if(url == undefined){
				alert("没有链接");
				return;
			}
			// 使用Ajax请求url
			$.ajax({
				url: url,
				type: 'get',
				data: {},
				dataType: 'html',
				success:function(data){
					$(".layui-body>div").html(data);
				},
				error:function(){
					
				}
			});
		}	
	});
</script>

